<!-- 登录组件 -->
<template>
<!--登录组件区域-->
    <div class="login_content">
      <!--登录盒子-->
      <div class="login_box">
          <!--头像-->
          <div class="avatar_box">
              <img src="../assets/logo.png" alt="">
          </div>
          <!-- 登录表单区域 -->
          <!-- label-width="0px"顶端对齐 -->
          <el-form ref="loginForm" :model="loginform" :rules="formRule" label-width="0px" class="login_form">
              <!-- 用户名 -->
              <el-form-item prop="username">
                 <el-input v-model="loginform.username" prefix-icon="iconfont icon-user">
                </el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password"> 
                <el-input type="password" v-model="loginform.password" prefix-icon="iconfont icon-3702mima">
                </el-input>
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item class="login_button">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
              </el-form-item>
          </el-form>
      </div>

    </div>

</template>
<script>
export default{
    data(){
        return {
            //登录表单绑定的数据对象
            loginform:{
                username:'',
                password:''

            },
            //表单验证规则
            formRule:{
                // 验证用户名是否合法
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}

                ],
                 password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}

                ]



            }
        }
    },
    methods:{
        //点击重置按钮
        resetForm(){
           this.$refs.loginForm.resetFields();
        },
        login(){  
            // console.log("object");
            // 登录前表单验证
            this.$refs.loginForm.validate( async valid=>{
                // console.log(valid);
                // 如果验证错误就返回
                if(!valid) return; 
                // 验证正确，发送请求
                // const {data:res}=await this.$http.post('http://127.0.0.1:8888/api/private/v1/login',this.loginform)
                const {data:res}=await this.$http.post('/login',this.loginform)
                // console.log(res);
                if (res.meta.status!==200) return this.$message.error(res.meta.msg);
                // 成功
                this.$message({
                    message: res.meta.msg,
                    type: 'success'
                });
                // 1.登录成功，保存token到客户端 sessionStorage
                    // 1-1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
                    // 1-2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                window.sessionStorage.setItem('token',res.data.token);
                // console.log(res.data.token);
                // 2.通过编程式导航跳转到后台主页
                // 这是路由接口路径与改变根路径无关
                this.$router.push('/home')
                // const re=await this.$http.post('http://127.0.0.1:8886/api/login',this.loginform)
                // console.log(re);
            })
        }
    }
}



</script>

<!-- lang="less" 表示这个节点中支持less语法格式-->
<!--scoped 用来控制组件生效的区间  如果去掉会全局生效，可能会样式冲突-->
<style lang="less" scoped>
.login_content{
    background-color: #2b5b6b;;
    height: 100%; 
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius:5px;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);


}
.avatar_box{
    height: 130px;
    width: 130px;
    border:1px solid  #eee;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-shadow: 0 0 10px #ddd


}
.avatar_box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;



}
.login_form{
    position:absolute;
    bottom:0;
    width:100%;
    padding: 0 20px;
    box-sizing:border-box;


}
.login_button{
    display:flex;
    justify-content:flex-end;
}
</style>